<template>
	<div><div>    
		<p>原始字符串: {{ message }}</p>
    <p>计算后反转字符串: {{ reversedMessage }}</p> 
    <p>name:{{ name }} url:{{ url }}</p>   
	</div></div>
</template>
<script>
export default {
  data () { 
    return {
    	message: 'alun',
      name: '', 
      url: ''
    } 
  },
  computed: {
    //这里声明了一个计算属性reversedMessage
    reversedMessage: function () {
      //此方法将作为当前属性的getter方法
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    },
    site: {      
      get: function () {// getter
        return this.name + ''+ this.url
      },      
      set: function (newValue) {// setter
        var values = newValue.split(' ')
        this.name = values[0]
        this.url = values[values.length - 1]
      }
    }
  },
  created (){
    this.site = 'Google http://www.google.com';
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.class1 {
  font-size:60px;
  color:red;
}
</style>
